<template>
  <!-- <ScreenModal v-model="isVisible" title="监控详情" :width="oredrList.length > 0 ? 1355 : 985"> -->
  <ScreenModal v-model="isVisible" title="监控详情" :width="985">
    <div
      class="monitoring"
      v-loading="loading"
      element-loading-text="正在进行抓拍，请稍后...."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
    >
      <div class="monitoring_box">
        <div class="monitoring_among">
          <div
            id="jynPlayer"
            class="video"
            style="width: 100%"
            v-show="data.type != 2"
          ></div>
          <div
            id="jynPlayer"
            class="video"
            style="width: 100%"
            v-show="data.type == 2"
          >
            <jessibucaPlayer :videoURL="data.pcPlayUrl" :autoplay="true" />
          </div>
        </div>

        <div class="monitoring_bottom">
          <!-- <div class="monitoring-btn" style="padding-left: 5px;">
            <img src="@assets/images/jiankong/jieshuduiua.png" alt="" @click="startTalk" v-if="!start"
              style="width: 30px;height: 30px;" />
            <img src="@assets/images/jiankong/dianhua.png" alt="" @click="startTalk" v-if="start"
              style="width: 30px;height: 30px;" />
            <span>语音对讲</span>
          </div> -->
          <div class="monitoring-right">
            <div class="monitoring-btn" @click="capturePicture">
              <img src="@assets/images/jiankong/xiangji.png" alt="" />
              <span>巡查抓拍</span>
              <!-- <template v-show="isZhuaPai">...</template> -->
            </div>
            <!-- <div class="monitoring-btn" @click="startSave">
              <img src="@assets/images/jiankong/kaishiluzhi.jpg" alt="" v-if="!opens" />
              <img src="@assets/images/jiankong/jieshuluzhi.jpg" alt="" v-else />
              <span>视频录制</span>
            </div> -->

            <!-- <span style="cursor: pointer;">高清</span> -->
            <!-- <img style="cursor: pointer;" src="@assets/images/jiankong/quanpin.png" alt="" @click="fullScreen" /> -->
          </div>
        </div>
      </div>

      <div class="monitoring_right" v-if="oredrList.length > 0 && false">
        <div class="monitoring_right_title">抓拍案件</div>
        <div class="monitoring_right_list">
          <div
            class="monitoring_right_list_item"
            v-for="(item, index) in oredrList"
            :key="'a' + index"
          >
            <p>抓拍类型：{{ item.type }}</p>
            <p>事件类型：{{ item.c_type }}</p>
            <p>抓拍事件：{{ item.gather_time }}</p>
            <p>抓拍地址： {{ item.address }}</p>
            <p>所属街办：{{ item.street }}</p>
            <p>问题描述：{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <jian-kong-view ref="jianKongView"></jian-kong-view>
  </ScreenModal>
</template>

<script>
import jessibucaPlayer from "@/views/JianKongLieBiao/components/jessibuca.vue";
import JianKongView from "./JianKongview";
import { ZhanDaoJingYing } from "@/api";
import "@/ezuikit-new/ezuikit";
var talk = null;
var decoder = null;

export default {
  name: "popup",
  components: { JianKongView, jessibucaPlayer },
  props: {
    videoData: {
      type: Object,
    }, //页面类型
  },
  data() {
    return {
      loading: false,
      isVisible: false,
      jynPlayers: null,
      opens: false,
      start: false,
      oredrList: [],
      data: {},
      isZhuaPai: false,
      isInitSound: true,
    };
  },
  watch: {
    isVisible: function (value) {
      if (!value) {
        this.$emit("close", this.data);
        decoder.stop();
        decoder.destroy();
        decoder = null;
        this.start = false;
        this.isZhuaPai = false;
        this.isInitSound = true;
      }
    },
  },

  methods: {
    open(data) {
      if (!data.token) {
        return;
      }
      this.isVisible = true;
      this.isZhuaPai = false;
      this.data = data;
      this.captureList(data);
      if (data.type != 2) {
        this.initTalk(data);
      }
    },

    // 截图
    capturePicture() {
      this.$refs.jianKongView.open({
        siteNumber: this.data.siteNumber,
        ...this.data,
      });
      this.loading = false;
    },

    // 录制
    startSave() {
      this.opens = !this.opens;
      if (this.opens) {
        var startSavePromise = decoder.startSave(`${new Date().getTime()}`);
        startSavePromise.then(function (res) {}).catch(function (error) {});
      } else {
        var stopSavePromise = decoder.stopSave(0);
        stopSavePromise.then(function (res) {}).catch(function (error) {});
      }
    },

    // 全屏
    fullScreen() {
      decoder.fullScreen();
    },

    captureList(item) {
      const data = {
        device: item.siteNumber,
      };
      ZhanDaoJingYing.GetOredrList(data).then((res) => {
        this.oredrList = res.data || [];
      });
    },

    toTime: (value) => {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
    },

    // update
    addJs(filepath, callback) {
      var oJs = document.createElement("script");
      oJs.setAttribute("src", filepath);
      oJs.onload = callback;
      document.getElementsByTagName("head")[0].appendChild(oJs);
    },
    initTalk() {
      const data = this.data;
      const _this = this;
      // this.addJs("/ezuikit-new/ezuikit.js", function () {
      decoder = new EZUIKit.EZUIKitPlayer({
        id: "jynPlayer",
        autoplay: true,
        template: "security",
        url: data.voiceUrl,
        accessToken: data.token,
        width: 865,
        height: 487,
        handleError: function (e) {
          this.isVisible = false;
        },
        openSoundCallBack: function (res) {
          if (_this.isInitSound) {
            _this.isInitSound = false;
            decoder.closeSound();
          }
        },
      });
      // });
    },
    startTalk() {
      console.info("开启讲话");
      this.start = !this.start;
      if (this.start) {
        // decoder && decoder.closeSound(0);
        talk.startTalk();
        decoder.openSound();
      } else {
        talk.stopTalk();
        talk.closeSound();
        // decoder && decoder.openSound(0);
      }
    },
  },
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0;
}

.monitoring {
  height: 100%;
  padding-top: 40px;
  display: flex;
  justify-content: space-between;

  &_box {
    width: 926px;
    background: rgba(31, 73, 135, 0.3);
    border: 1px solid rgba(35, 104, 255, 0.3);
    padding: 30px;
  }

  &_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;

    img {
      height: 24px;
      margin-left: 26px;
    }
  }

  &_among {
    width: 100%;
    height: 487px;
    border: 1px solid #2368ff;
    margin-top: 20px;

    .video {
      width: 100%;
      height: 100%;
    }
  }

  &_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 26px;

    .monitoring-btn {
      cursor: pointer;
      height: 32px;
      background: rgba(31, 73, 135, 0.4);
      border: 1px solid #0074fa;
      border-radius: 16px;
      display: flex;
      align-items: center;
      padding: 0 24px 0 0;
      margin-right: 10px;

      img {
        width: 33px;
        height: 33px;
        display: inline-block;
        margin-right: 11px;
      }

      span {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .monitoring-right {
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      img {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-left: 20px;
      }
    }
  }

  &_right {
    width: 340px;
    height: 100%;
    display: flex;
    flex-direction: column;

    &_title {
      height: 50px;
      background: rgba(31, 73, 135, 0.6);
      border: 1px solid rgba(129, 167, 250, 0.6);
      font-size: 18px;
      font-family: Noto Sans S Chinese;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 50px;
    }

    &_list {
      height: 100%;
      max-height: 609px;
      overflow: auto;

      &_item {
        width: 100%;
        padding: 22px;
        background: rgba(9, 31, 68, 0.3);
        border: 1px solid rgba(129, 167, 250, 0.6);
        margin-top: 10px;

        p {
          font-size: 14px;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #9ed5ff;
          margin-bottom: 10px;
        }

        p:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>

<style>
.footer-controls {
  opacity: 1 !important;
}
</style>